<template>
  <div class="home_child_container">
    <div class="homepage_main_container">
      <!-- 推荐博客 -->
      <a-card class="recommend_blog_card" :loading="loading">
        <template #title>
          <b class="recommend_blog_title">推荐博客</b>
        </template>
        <a-list class="recommend_blog_list" item-layout="vertical" :data-source="blogList">
          <template #renderItem="{ item }">
            <a-list-item :key="item.id">
              <blog-item :blog="item"/>
            </a-list-item>
          </template>
          <template #loadMore>
            <div class="list_load_more_div" v-if="blogList.length > 0">
              <a-button type="primary" @click="getMoreRecommendBlog" v-if="hasMore && !loadingMore" ghost>
                加载更多
              </a-button>
              <a-skeleton v-if="loadingMore" active/>
              <span v-if="!hasMore">已经到底啦~</span>
            </div>
          </template>
        </a-list>
      </a-card>
      <div class="sidebar">
        <!-- 搜索框 -->
        <a-card class="search_card">
          <a-input-search v-model:value="searchValue" placeholder="请输入要搜索的内容..."
                          enter-button @search="onSearch"/>
        </a-card>
        <!-- 推荐作者 -->
        <a-card class="recommend_user_card" :loading="loading">
          <template #title>
            <b class="recommend_user_title">推荐作者</b>
          </template>
          <a-list class="recommend_user_list" :split="false" :data-source="authorList">
            <template #renderItem="{ item }">
              <a-list-item :key="item.id">
                <user-info-item :user="item"/>
              </a-list-item>
            </template>
          </a-list>
        </a-card>
      </div>
    </div>
    <!-- 页脚 -->
    <a-space class="homepage_footer">
      <CopyrightOutlined/>
      <a href="https://beian.miit.gov.cn/" target="_blank">
        皖ICP备2021006363号
      </a>
    </a-space>
  </div>
</template>

<script>
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { CopyrightOutlined } from '@ant-design/icons-vue'
import BlogItem from '../../components/item/BlogItem'
import UserInfoItem from '@/components/item/UserInfoItem'
import { GetRecommendBlog } from '@/service/blog'
import { GetRecommendUserList } from '@/service/user'
import { useRouter } from 'vue-router'

export default defineComponent({
  setup () {
    const router = useRouter()
    const state = reactive({
      loading: true,
      blogList: [],
      authorList: [],
      searchValue: '',
      loadingMore: false,
      hasMore: true
    })

    const methods = reactive({
      getMoreRecommendBlog: async () => {
        state.loadingMore = true
        const moreList = state.blogList.length > 0 ? await GetRecommendBlog(state.blogList[state.blogList.length - 1].createdTime) : await GetRecommendBlog()
        if (moreList && moreList.length < 10) {
          state.hasMore = false
        }
        state.blogList = state.blogList.concat(moreList)
        state.loadingMore = false
      },
      onSearch: () => {
        router.push({
          name: 'search',
          params: { value: state.searchValue }
        })
      }
    })

    onMounted(async () => {
      // 查询推荐博客
      await methods.getMoreRecommendBlog()
      // 查询推荐作者
      state.authorList = await GetRecommendUserList()
      // 加载完成
      state.loading = false
    })

    return {
      ...toRefs(state),
      ...toRefs(methods)
    }
  },
  components: {
    BlogItem,
    UserInfoItem,
    CopyrightOutlined
  }
})
</script>

<style lang="less" scoped>
.home_child_container {
  flex-direction: column;

  & .homepage_main_container {
    width: 100%;
    display: flex;
    justify-content: space-between;

    & .recommend_blog_card {
      width: 70%;
      height: 100%;
      background-color: white;

      & .recommend_blog_title {
        font-size: 20px;
      }

      & .recommend_blog_list {
        margin-top: -20px;
      }

      & .list_load_more_div {
        margin-top: 15px;
        width: 100%;
        color: #00000080;
        display: flex;
        justify-content: center;
      }
    }

    & .sidebar {
      width: 29%;
      display: flex;
      flex-direction: column;

      & .recommend_user_card {
        margin: 10px 0;
      }

      & .recommend_user_title {
        font-size: 20px;
      }
    }
  }

  & .homepage_footer {
    margin-top: 20px;
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media screen and (max-width: 1400px) {
  .home_child_container {
    & .homepage_main_container {
      & .recommend_blog_card {
        width: 100%;
      }

      & .sidebar {
        display: none;
      }
    }
  }
}
</style>
